{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}

  <div class="page-wrapper">
    <!-- Page header -->
    <div class="page-header d-print-none">
      <div class="container-xl">
        <div class="row g-2 align-items-center">
          <div class="col">
            <h2 class="page-title">
              Colors
            </h2>
          </div>
        </div>
      </div>
    </div>
    <!-- Page body -->
    <div class="page-body">
      <div class="container-xl">
        <div class="card">
          <div class="card-body">
            <div class="table-responsive">
              <table class="table text-center">
                <tr>
                  <td>
                    <div class="avatar bg-blue text-blue-fg" data-demo-color>bl
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-azure text-azure-fg" data-demo-color>az
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-indigo text-indigo-fg" data-demo-color>in
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-purple text-purple-fg" data-demo-color>pu
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-pink text-pink-fg" data-demo-color>pi
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-red text-red-fg" data-demo-color>re
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-orange text-orange-fg" data-demo-color>or
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-yellow text-yellow-fg" data-demo-color>ye
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-lime text-lime-fg" data-demo-color>li
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-green text-green-fg" data-demo-color>gr
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-teal text-teal-fg" data-demo-color>te
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-cyan text-cyan-fg" data-demo-color>cy
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-dark text-dark-fg" data-demo-color>da
                    </div>
                  </td>
                  <td>
                    <div class="avatar bg-muted text-muted-fg" data-demo-color>mu
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="avatar bg-blue-lt" data-demo-color>bl</div>
                  </td>
                  <td>
                    <div class="avatar bg-azure-lt" data-demo-color>az</div>
                  </td>
                  <td>
                    <div class="avatar bg-indigo-lt" data-demo-color>in</div>
                  </td>
                  <td>
                    <div class="avatar bg-purple-lt" data-demo-color>pu</div>
                  </td>
                  <td>
                    <div class="avatar bg-pink-lt" data-demo-color>pi</div>
                  </td>
                  <td>
                    <div class="avatar bg-red-lt" data-demo-color>re</div>
                  </td>
                  <td>
                    <div class="avatar bg-orange-lt" data-demo-color>or</div>
                  </td>
                  <td>
                    <div class="avatar bg-yellow-lt" data-demo-color>ye</div>
                  </td>
                  <td>
                    <div class="avatar bg-lime-lt" data-demo-color>li</div>
                  </td>
                  <td>
                    <div class="avatar bg-green-lt" data-demo-color>gr</div>
                  </td>
                  <td>
                    <div class="avatar bg-teal-lt" data-demo-color>te</div>
                  </td>
                  <td>
                    <div class="avatar bg-cyan-lt" data-demo-color>cy</div>
                  </td>
                  <td>
                    <div class="avatar bg-dark-lt" data-demo-color>da</div>
                  </td>
                  <td>
                    <div class="avatar bg-muted-lt" data-demo-color>mu</div>
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="avatar text-blue bg-transparent" data-demo-color>bl</div>
                  </td>
                  <td>
                    <div class="avatar text-azure bg-transparent" data-demo-color>az</div>
                  </td>
                  <td>
                    <div class="avatar text-indigo bg-transparent" data-demo-color>in</div>
                  </td>
                  <td>
                    <div class="avatar text-purple bg-transparent" data-demo-color>pu</div>
                  </td>
                  <td>
                    <div class="avatar text-pink bg-transparent" data-demo-color>pi</div>
                  </td>
                  <td>
                    <div class="avatar text-red bg-transparent" data-demo-color>re</div>
                  </td>
                  <td>
                    <div class="avatar text-orange bg-transparent" data-demo-color>or</div>
                  </td>
                  <td>
                    <div class="avatar text-yellow bg-transparent" data-demo-color>ye</div>
                  </td>
                  <td>
                    <div class="avatar text-lime bg-transparent" data-demo-color>li</div>
                  </td>
                  <td>
                    <div class="avatar text-green bg-transparent" data-demo-color>gr</div>
                  </td>
                  <td>
                    <div class="avatar text-teal bg-transparent" data-demo-color>te</div>
                  </td>
                  <td>
                    <div class="avatar text-cyan bg-transparent" data-demo-color>cy</div>
                  </td>
                  <td>
                    <div class="avatar text-dark bg-transparent" data-demo-color>da</div>
                  </td>
                  <td>
                    <div class="avatar text-muted bg-transparent" data-demo-color>mu</div>
                  </td>
                </tr>
                <tr class="bg-light">
                  <td>
                    <div class="avatar text-blue bg-transparent" data-demo-color>bl</div>
                  </td>
                  <td>
                    <div class="avatar text-azure bg-transparent" data-demo-color>az</div>
                  </td>
                  <td>
                    <div class="avatar text-indigo bg-transparent" data-demo-color>in</div>
                  </td>
                  <td>
                    <div class="avatar text-purple bg-transparent" data-demo-color>pu</div>
                  </td>
                  <td>
                    <div class="avatar text-pink bg-transparent" data-demo-color>pi</div>
                  </td>
                  <td>
                    <div class="avatar text-red bg-transparent" data-demo-color>re</div>
                  </td>
                  <td>
                    <div class="avatar text-orange bg-transparent" data-demo-color>or</div>
                  </td>
                  <td>
                    <div class="avatar text-yellow bg-transparent" data-demo-color>ye</div>
                  </td>
                  <td>
                    <div class="avatar text-lime bg-transparent" data-demo-color>li</div>
                  </td>
                  <td>
                    <div class="avatar text-green bg-transparent" data-demo-color>gr</div>
                  </td>
                  <td>
                    <div class="avatar text-teal bg-transparent" data-demo-color>te</div>
                  </td>
                  <td>
                    <div class="avatar text-cyan bg-transparent" data-demo-color>cy</div>
                  </td>
                  <td>
                    <div class="avatar text-dark bg-transparent" data-demo-color>da</div>
                  </td>
                  <td>
                    <div class="avatar text-muted bg-transparent" data-demo-color>mu</div>
                  </td>
                </tr>
                <tr class="bg-dark text-white">
                  <td>
                    <div class="avatar text-blue bg-transparent" data-demo-color>bl</div>
                  </td>
                  <td>
                    <div class="avatar text-azure bg-transparent" data-demo-color>az</div>
                  </td>
                  <td>
                    <div class="avatar text-indigo bg-transparent" data-demo-color>in</div>
                  </td>
                  <td>
                    <div class="avatar text-purple bg-transparent" data-demo-color>pu</div>
                  </td>
                  <td>
                    <div class="avatar text-pink bg-transparent" data-demo-color>pi</div>
                  </td>
                  <td>
                    <div class="avatar text-red bg-transparent" data-demo-color>re</div>
                  </td>
                  <td>
                    <div class="avatar text-orange bg-transparent" data-demo-color>or</div>
                  </td>
                  <td>
                    <div class="avatar text-yellow bg-transparent" data-demo-color>ye</div>
                  </td>
                  <td>
                    <div class="avatar text-lime bg-transparent" data-demo-color>li</div>
                  </td>
                  <td>
                    <div class="avatar text-green bg-transparent" data-demo-color>gr</div>
                  </td>
                  <td>
                    <div class="avatar text-teal bg-transparent" data-demo-color>te</div>
                  </td>
                  <td>
                    <div class="avatar text-cyan bg-transparent" data-demo-color>cy</div>
                  </td>
                  <td>
                    <div class="avatar text-white bg-transparent" data-demo-color>wh</div>
                  </td>
                  <td>
                    <div class="avatar text-muted bg-transparent" data-demo-color>mu</div>
                  </td>
                </tr>
                <tr class="bg-dark text-white">
                  <td>
                    <div class="avatar bg-blue-lt" data-demo-color>bl</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-azure-lt" data-demo-color>az</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-indigo-lt" data-demo-color>in</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-purple-lt" data-demo-color>pu</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-pink-lt" data-demo-color>pi</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-red-lt" data-demo-color>re</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-orange-lt" data-demo-color>or</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-yellow-lt" data-demo-color>ye</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-lime-lt" data-demo-color>li</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-green-lt" data-demo-color>gr</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-teal-lt" data-demo-color>te</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-cyan-lt" data-demo-color>cy</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-white-lt" data-demo-color>wh</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                  <td>
                    <div class="avatar bg-muted-lt" data-demo-color>mu</div>
                    <div class="mt-2" data-demo-color-contrast></div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% include 'includes/footer.html' %}
  </div>
  
{% endblock content %}